<template>
  <div class="settings-page">
    <el-card class="page-header">
      <div class="header-content">
        <div class="title-section">
          <h2>系统设置</h2>
          <p>配置系统参数和选项</p>
        </div>
      </div>
    </el-card>

    <el-card class="settings-card">
      <el-tabs v-model="activeTab" type="border-card">
        <el-tab-pane label="基本设置" name="basic">
          <el-form :model="basicSettings" label-width="120px">
            <el-form-item label="系统名称">
              <el-input v-model="basicSettings.systemName" />
            </el-form-item>
            <el-form-item label="系统描述">
              <el-input v-model="basicSettings.systemDesc" type="textarea" />
            </el-form-item>
            <el-form-item label="时区">
              <el-select v-model="basicSettings.timezone" style="width: 200px">
                <el-option label="北京时间 (UTC+8)" value="Asia/Shanghai" />
                <el-option label="东京时间 (UTC+9)" value="Asia/Tokyo" />
                <el-option label="纽约时间 (UTC-5)" value="America/New_York" />
              </el-select>
            </el-form-item>
            <el-form-item label="语言">
              <el-radio-group v-model="basicSettings.language">
                <el-radio label="zh-CN">中文</el-radio>
                <el-radio label="en-US">English</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="安全设置" name="security">
          <el-form :model="securitySettings" label-width="120px">
            <el-form-item label="密码策略">
              <el-checkbox-group v-model="securitySettings.passwordPolicy">
                <el-checkbox label="requireUppercase">必须包含大写字母</el-checkbox>
                <el-checkbox label="requireLowercase">必须包含小写字母</el-checkbox>
                <el-checkbox label="requireNumbers">必须包含数字</el-checkbox>
                <el-checkbox label="requireSymbols">必须包含特殊字符</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="密码长度">
              <el-input-number v-model="securitySettings.passwordLength" :min="6" :max="20" />
            </el-form-item>
            <el-form-item label="登录失败次数">
              <el-input-number v-model="securitySettings.maxLoginAttempts" :min="3" :max="10" />
            </el-form-item>
            <el-form-item label="会话超时(分钟)">
              <el-input-number v-model="securitySettings.sessionTimeout" :min="30" :max="480" />
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="通知设置" name="notification">
          <el-form :model="notificationSettings" label-width="120px">
            <el-form-item label="邮件通知">
              <el-switch v-model="notificationSettings.emailEnabled" />
            </el-form-item>
            <el-form-item label="短信通知">
              <el-switch v-model="notificationSettings.smsEnabled" />
            </el-form-item>
            <el-form-item label="系统通知">
              <el-switch v-model="notificationSettings.systemEnabled" />
            </el-form-item>
            <el-form-item label="通知类型">
              <el-checkbox-group v-model="notificationSettings.notificationTypes">
                <el-checkbox label="matchStart">比赛开始</el-checkbox>
                <el-checkbox label="matchEnd">比赛结束</el-checkbox>
                <el-checkbox label="scoreUpdate">比分更新</el-checkbox>
                <el-checkbox label="systemMaintenance">系统维护</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="数据设置" name="data">
          <el-form :model="dataSettings" label-width="120px">
            <el-form-item label="数据备份">
              <el-switch v-model="dataSettings.autoBackup" />
            </el-form-item>
            <el-form-item label="备份频率">
              <el-select v-model="dataSettings.backupFrequency" :disabled="!dataSettings.autoBackup">
                <el-option label="每日" value="daily" />
                <el-option label="每周" value="weekly" />
                <el-option label="每月" value="monthly" />
              </el-select>
            </el-form-item>
            <el-form-item label="数据保留期(天)">
              <el-input-number v-model="dataSettings.dataRetentionDays" :min="30" :max="3650" />
            </el-form-item>
            <el-form-item label="日志级别">
              <el-select v-model="dataSettings.logLevel">
                <el-option label="DEBUG" value="debug" />
                <el-option label="INFO" value="info" />
                <el-option label="WARN" value="warn" />
                <el-option label="ERROR" value="error" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <div class="settings-actions">
        <el-button type="primary" @click="handleSave">
          <el-icon><Check /></el-icon>
          保存设置
        </el-button>
        <el-button @click="handleReset">
          <el-icon><Refresh /></el-icon>
          重置
        </el-button>
        <el-button @click="handleTest">
          <el-icon><Tools /></el-icon>
          测试连接
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

const activeTab = ref('basic')

// 基本设置
const basicSettings = reactive({
  systemName: '赛事数据管理系统',
  systemDesc: '一个专业的赛事数据管理平台',
  timezone: 'Asia/Shanghai',
  language: 'zh-CN'
})

// 安全设置
const securitySettings = reactive({
  passwordPolicy: ['requireUppercase', 'requireNumbers'],
  passwordLength: 8,
  maxLoginAttempts: 5,
  sessionTimeout: 120
})

// 通知设置
const notificationSettings = reactive({
  emailEnabled: true,
  smsEnabled: false,
  systemEnabled: true,
  notificationTypes: ['matchStart', 'matchEnd', 'scoreUpdate']
})

// 数据设置
const dataSettings = reactive({
  autoBackup: true,
  backupFrequency: 'daily',
  dataRetentionDays: 365,
  logLevel: 'info'
})

const handleSave = () => {
  ElMessage.success('设置保存成功！')
}

const handleReset = () => {
  ElMessageBox.confirm('确定要重置所有设置吗？', '重置确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('设置已重置')
  }).catch(() => {
    ElMessage.info('已取消重置')
  })
}

const handleTest = () => {
  ElMessage.info('正在测试连接...')
  setTimeout(() => {
    ElMessage.success('连接测试成功！')
  }, 1000)
}
</script>

<style scoped>
.settings-page {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.page-header {
  margin-bottom: 20px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-section h2 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 20px;
}

.title-section p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.settings-card {
  min-height: 600px;
}

.settings-actions {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;
  text-align: right;
}

.settings-actions .el-button {
  margin-left: 10px;
}
</style>
